<template>
  <div class="main">
    <div class="back">
      <div @click="$router.go(-1)">
          <i class="el-icon-back"></i>

          <span>返回</span>
          
        </div>
        <span style="color:rgb(230,230,230)">|</span>
        <span class="title">发送消息</span>
    </div>
      <div class="header">
        <div>
            <span>发送对象:</span>
            <el-tag
                v-for="tag in tags"
                :key="tag.id"
                >
<!--                @close="close(tag)">-->
                {{tag.true_name}}
                </el-tag>
            <el-button type="primary"  size="mini" @click="dialogVisible.state = true">添加用户</el-button>
        </div>

      </div>
      <div class="body" >
          <div class="msh">
              <el-input
                rows="10"
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                show-word-limit
                />
          </div>

      </div>
      <div class="foot">
          <div class="up">
              <span style="line-height: 32px;">附件:</span> 
              <el-upload
                class="upload-demo"
                :action="uploads"
                :on-remove="handleRemove"
                :on-success="success"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
          </div>
      </div>
      <div class="submit">
          <el-button @click="submit">确定</el-button>
      </div>
        <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible.state"
        :lock-scroll="true"
        top="5vh"
        width="70%">
            <Index :list="tags" :info="infoData" :isShow = "dialogVisible"></Index>
<!--        <pickUser :list="tags" :info="infoData" :isShow = "dialogVisible" />-->
<!--        <span slot="footer" class="dialog-footer">-->
<!--            &lt;!&ndash; <el-button @click="dialogVisible = false">取 消</el-button> &ndash;&gt;-->
<!--            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--        </span>-->
        </el-dialog>
  </div>
</template>

<script>
// import pickUser from '../../components/message/pickUser'
import UserPickerComponent from "../../components/message/UserPickerComponent";
import Index from "../../components/message/Index";
export default {
  props:{
        infoData:Object
    },
    components:{
        // pickUser
        Index,
        UserPickerComponent
    },
  data(){
    return {
      info:{},
      textarea:"",
        uploads:"",
      fileList:[],
       dialogVisible:{state:false},
       tags:[],
       bind_data:[]
    }
  },
  mounted(){

    setTimeout(()=>{
          console.log(this.infoData)
            this.uploads = this.infoData.upload
      },1000)

    // console.log(this.$route.query.id)
  },
  methods:{
      load(){
        $.get(this.infoData.viewMsg,{"id":this.$route.query.id},Response => {
            if(Response.success){
                this.info = Response.data;
                if(Response.data.bind_data != null){
                  this.info.bind_data = JSON.parse(Response.data.bind_data)[0]
                }
                
                console.log(this.info.bind_data)
            }else{
                this.$message.error(Response.errMessage);
            }
            this.loading(false)
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleRemove(file, fileList) {
        // console.log(file.response.data[0].id, fileList);
          for(let i = 0; i < this.bind_data.length; i++){
              if(file.response.data.id == this.bind_data[i].id){
                  this.tags.splice(i,1)
              }

          }
      },
      close(item){
        //   console.log(this.tags.length)
            // this.ilst.splice
            for(let i = 0; i<this.tags.length;i++){
                if(this.tags[i].id == item.id){
                    this.$nextTick(()=>{
                        this.tags.splice(i,1)
                    })

                }
            }
        //   console.log(this.tags)
      },
      success(response, file, fileList){
          console.log(response, file, fileList)
          this.bind_data.push({"id":response.data.id,"name":response.data.name})
          console.log(this.bind_data)
      },
      submit(){
          
          if(this.tags.length == 0){
              this.$message.error("请添加用户");
            return ;
          }
          if(this.textarea == ""){
              this.$message.error("不能发送空消息");
              return ;
          }
          let arr = []
        for(let item of this.tags){
            arr.push(item.id)
        }
         $.post(this.infoData.send,{to_uid:JSON.stringify(arr),"content":this.textarea,"bind_data":JSON.stringify(this.bind_data)},Response => {
                if(Response.success){
                    this.loading(false)
                    this.tags = []
                    this.$router.go(-1)
                    // this.loadings = false;
                }else{
                    this.$message.error("错误");
                }
            })
      },
      loading(bool = true) {
                
            const loading = this.$loading({
            lock: true,
            text: '',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
            });
            if(!bool){
                loading.close();
            }
        }
  }

}
</script>

<style lang="less" scoped>
  .main{
    height:100vh;
    width: 100%;
    background:rgba(240,240,240,0.5);
    /*padding:10px;*/
    flex-direction: column;
    .back{
      height:50px;
       background:#fff;
       display: flex;
       align-items: center;
       i{
        margin:0 5px;
        font-size:16px;
       }
       div{
         margin:0 10px;
         cursor: pointer;
       }
       span{
         font-size:16px;
       }
       .title{
         margin:0 10px
       }
    }
    .header{
    //   height:50px;
        padding:10px;
      margin-top:10px;
      display:flex;
      align-items: center;
        background:#fff;
        span{
            margin:5px 5px
        }
    }
    .body{
        padding:10px;
      margin-top:10px;
      display:flex;
      align-items: center;
        background:#fff;
        .msh{
            width:100%;
            textarea{
                height: 200px;

            }
            
        }
    }
    .foot{
        padding:10px;
      margin-top:10px;
      display:flex;
      align-items: center;
        background:#fff;
        .up{
            display: flex;
            // align-items: center;
        }
    }
    .submit{
        button{
            margin: 15px auto;
            display: block;
        }
    }
    
  }
</style>